{include file="public/header" /}
<style>
    .chat-info{
        width:100%;
        margin-top: 10px
    }
    .chat-user-info{
        margin-top: 2px
    }
    .chat-text{
        margin-left: 40px;
        word-break:break-all
    }
    .chat-img{
        width: 60px;
        border-radius: 0;
        cursor: pointer
    }
    .chat-video{
        width: 100px!important;
        height: auto!important;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>聊天记录</h5>
                </div>
                <div class="ibox-content layui-form">
                    <div class="layui-row layui-col-space10 layui-form-item ">
                        <div class="wrapper wrapper-content">
                            <div class="ibox float-e-margins">
                                <div class="ibox-content">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="layui-form layui-form-item" >

                                                <div class="layui-col-md6 layui-input-inline">
                                                    <input type="text" id="phone1" class="layui-input search" name="phone1" placeholder="手机号1"/>
                                                </div>

                                                <div class="layui-col-md6 layui-input-inline">
                                                    <input type="text" id="phone2" class="layui-input search" name="phone2" placeholder="手机号2"/>
                                                </div>

                                                <div class="layui-input-inline">
                                                    <button class="layui-btn" id="search-phone">搜索记录</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="chat-list">

                                    <!--<div class="chat-info">-->
                                        <!--<div class="chat-user-info">15251871872:</div>-->
                                        <!--<div class="chat-text">你说呢！！</div>-->
                                    <!--</div>-->

                                    <!--<div class="chat-info">-->
                                        <!--<div class="chat-user-info">15251871872:</div>-->
                                        <!--<div class="chat-text">-->
                                            <!--<img src="http://qs076oq44.hd-bkt.clouddn.com/1619593247827.jpg" class="chat-img img-circle">-->
                                        <!--</div>-->
                                    <!--</div>-->

                                    <!--<div class="chat-info">-->
                                        <!--<div class="chat-user-info">15251871872:</div>-->
                                        <!--<div class="chat-text">-->
                                            <!--<video width="60px" class="chat-video" controls>-->
                                                <!--<source src="http://qs076oq44.hd-bkt.clouddn.com/1619593920563.mp4" type="video/mp4" />-->
                                            <!--</video>-->
                                        <!--</div>-->
                                    <!--</div>-->

                                    <!--<div class="chat-info">-->
                                        <!--<div class="chat-user-info">15251871872:</div>-->
                                        <!--<div class="chat-text">-->
                                            <!--<audio controls>-->
                                                <!--<source src="http://qs076oq44.hd-bkt.clouddn.com/audio_1619765352212.mp3" type="audio/mpeg">-->
                                                <!--<source src="images/bg.ogg" type="audio/ogg">您的浏览器不支持-->
                                            <!--</audio>-->
                                        <!--</div>-->
                                    <!--</div>-->

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{include file="public/footer" /}
<script>
    $('#search-phone').on('click', function () {
        var phone1 = $('#phone1').val();
        var phone2 = $('#phone2').val();
        if(phone1 == '' || phone2 == ''){
            wk.error('请输入需要搜索的手机号','','$(".layui-btn").removeClass(\'layui-disabled\').removeAttr(\'disabled\');');
            return;
        }
        $.ajax({
            url: "{:url('Chat/chatIndex')}",
            type: 'post',
            dataType: 'json',
            data: {'phone1':phone1, 'phone2':phone2},
            success:function(res){
                if(res.code == 200){
                    var data = res.msg;
                    if(data.length == 0){
                        wk.error('暂无聊天内容','','$(".layui-btn").removeClass(\'layui-disabled\').removeAttr(\'disabled\');');
                    }else{
                        var _html = '';
                        $.each(data, function(i, v){
                            _html += '<div class="chat-info">';
                            _html += '<div class="chat-user-info">' + v.chat_send_phone + ':</div>';
                            if(v.chat_type == 1){
                                _html += '<div class="chat-text">' + v.chat_content + '</div>';
                            }else if(v.chat_type == 2){
                                _html += '<div class="chat-text">';
                                _html += '<img src="' + v.chat_content + '" class="img-circle chat-img">';
                                _html += '</div>';
                            }else if(v.chat_type == 3){
                                _html += '<div class="chat-text">';
                                _html += '<video width="60px" class="chat-video" controls>';
                                _html += '<source src="' + v.chat_content + '" type="video/mp4" />';
                                _html += '</video>';
                                _html += '</div>';
                            }else {
                                _html += '<div class="chat-text">';
                                _html += '<audio controls class="audio-music" src="' + v.chat_content +'">';
                                _html += '</audio>';
                                _html += '</div>';
                            }
                            _html += '</div>';
                        });

                        $('#chat-list').html(_html);
                        // 重新加载图片放大
                        $('.img-circle').viewer();
                    }
                }else{
                    wk.error(res.msg,'','$(".layui-btn").removeClass(\'layui-disabled\').removeAttr(\'disabled\');');
                }
            }
        });
    })
</script>
</body>
</html>